<!-- 未提交费用 -->
<template>
  <div class="cost-task">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中心内容 -->
    <div class="task-content">
      <!-- 查询内容框 -->
      <van-cell title="查询内容" is-link :value="searchObj.dateTime" @click="showSearch = true" />
      <!-- 内容数列 -->
      <van-cell-group>
        <van-cell
          v-for="(item, index) in costList"
          :key="index">
          <template #title>
            <div class="van-title">
              <div class="van-top">
                <van-checkbox v-model="item.isState" checked-color="burlywood"></van-checkbox>
                <span class="custom-title">{{ item.fressDate | filterTime }}</span>
                <van-tag type="primary" color="burlywood">{{ item.costTotal }}</van-tag>
                <van-tag plain type="primary" color="burlywood" @click.stop="toDetail(item)">查看</van-tag>
              </div>
              <span class="cust-title">{{ item.cust_name }}</span>
            </div>
          </template>
          <template #label>
            <van-tag plain type="primary" color="burlywood">{{ item.fress_man }}</van-tag>
            <span class="custom-title">{{ item.request }}</span>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 底部的按键 -->
      <van-submit-bar button-text="新建表单" @submit="onSubmit1" button-color="burlywood">
        <van-checkbox type="primary" v-model="allChecked" @change="checkAll" checked-color="burlywood">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <!-- 查询内容弹出层 -->
    <van-popup v-model="showSearch" position="bottom">
      <van-field
        readonly
        clickable
        name="dateTime"
        :value="searchObj.dateTime"
        label="查询年月"
        placeholder="点击选择查询年月"
        @click="showPicker = true"
      />
      <div class="task-btn">
        <van-button type="info" size="small" block color="burlywood" @click="search">查询</van-button>
      </div>
    </van-popup>
    <!-- 审核弹出层 -->
    <van-popup v-model="showCost" position="bottom">
      <van-field v-model="approvalName" label="表单名称:" name="approvalName" />
      <div class="task-btn">
        <van-button type="info" size="small" block color="burlywood" @click="onSubmit2">提交</van-button>
      </div>
    </van-popup>
    <!-- 日期选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>

  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { getCostDepartmentList, CostSubmit } from '@/request/api'
import dayjs from 'dayjs'
export default {
  name: 'CostTask',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 10)
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      costList: [], // 费用审批数据列表
      showSearch: false, // 查询内容弹框是否显示
      showCost: false, // 审核弹出层是否显示
      costListId: [], // 提交审核选择id集合
      approvalName: dayjs(new Date()).format('YYYYMMDD') + '费用报销单', // 费用提交表单名称
      searchObj: { // 查询内容弹出层表单数据
        dateTime: ''
      },
      showPicker: false, // 日期选择器是否显示
      minDate: new Date(2005, 9, 1), // 日期最小值
      maxDate: new Date(2030, 10, 1), // 日期最大值
      currentDate: new Date(),
      showTag: true,
      allChecked: false // 是否全选
    }
  },
  created () {
    this.getCostList()
  },
  methods: {
    // 获取费用审批数据
    getCostList (val) {
      // 有查询条件
      if (val) {
        const param = {
          staffId: sessionStorage.getItem('userId'),
          year: val.dateTime.split('-')[0],
          month: val.dateTime.split('-')[1]
        }
        console.log(param)
        getCostDepartmentList(param).then(res => {
          console.log(res)
          if (res.Tag === 1) {
            this.costList = res.Data
            if (this.costList.length === 0) {
              this.$toast('暂无数据')
            }
          }
        })
        // 无查询条件
      } else {
        const param = { staffId: sessionStorage.getItem('userId') }
        getCostDepartmentList(param).then(res => {
          console.log(res)
          if (res.Tag === 1) {
            this.costList = res.Data
            if (this.costList.length === 0) {
              this.$toast('暂无数据')
            }
          }
        })
      }
    },
    // 查询有条件的费用审批数据
    search () {
      if (this.searchObj.dateTime) {
        this.getCostList(this.searchObj)
        this.showSearch = false
      } else {
        this.$toast('请先选择查询月份')
      }
    },
    // 数据全选
    checkAll (flag) {
      console.log(flag)
      this.costList.forEach(item => {
        if (flag) {
          item.isState = true
        } else {
          item.isState = false
        }
      })
    },
    // 表单提交
    onSubmit1 () {
      const lis = []
      this.costList.forEach(item => {
        if (item.isState) {
          lis.push(item.fressId)
        }
      })
      this.costListId = lis
      if (lis.length > 0) {
        this.showCost = true
      } else {
        this.$toast('请先选择费用')
      }
    },
    // 审核
    onSubmit2 () {
      if (this.approvalName) {
        this.$dialog.confirm({
          title: '提示',
          message: '您确定要提交审核吗?',
          confirmButtonColor: 'burlywood'
        }).then(() => {
          const param = {
            costListId: this.costListId,
            submitter: sessionStorage.getItem('userId'),
            approvalName: this.approvalName
          }
          console.log(param)
          CostSubmit(param).then(res => {
            console.log(res)
            if (res.Tag === 1) {
              this.$toast('已提交')
              window.location.reload()
            }
          })
        }).catch(() => {})
      } else {
        this.$toast('请先输入表单名称和审核意见')
      }
    },
    // 日期转换
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    // 日期选择器
    onConfirm (val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      this.searchObj.dateTime = val
      this.searchObj.dateTime = `${year}-${month}`
      this.showPicker = false
    },
    // 日期选择器弹窗的确认
    onCancel () {
      this.showPicker = false
    },
    // 跳转到详情页
    toDetail (value) {
      this.$router.push({
        name: 'CostDetail',
        params: value
      })
    }
  }
}
</script>

<style scoped lang="less">
.cost-task {
  width: 100%;
  height: 100%;
  .task-content {
    height: calc(100% - 2.53333rem);
    display: flex;
    flex-direction: column;
    .van-cell-group {
      flex: 1;
      overflow: auto;
      .van-cell {
        .van-cell__title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .van-title {
            display: flex;
            .van-top {
              flex: 1;
              display: flex;
              align-items: center;
              .van-tag {
                margin-left: 2px;
              }
            }
            .cust-title {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: right;
            }
          }
          .van-tag {
            margin-right: 2px;
          }
          .van-cell__label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .van-submit-bar {
      .van-submit-bar__bar {
        justify-content: space-between;
      }
    }
  }
  .task-btn {
    margin: .4rem;
    display: flex;
  }
}
</style>
